@import '../../styles/variables.scss';

.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  padding: 0 36rpx;
  background: linear-gradient(180deg, $background-gradient-start 0%, $background-gradient-end 100%);
  
  .nav-placeholder {
    height: $nav-height;
  }
  
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: $nav-height;
    margin-top: 8rpx;
    padding: 20rpx 0;
    
    &-title {
      line-height: 32rpx;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
  
  .card {
    display: flex;
    justify-content: flex-start;
    margin-top: 32rpx;
    width: 100%;
    opacity: 1;
    border-radius: $border-radius-large;
    
    .image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 100%;
      overflow: hidden;
      border: 4rpx solid $text-color;
      
      image {
        width: 160rpx;
        height: 160rpx;
      }
    }
  }
  
  .card-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 24rpx;
    flex: 1;
    
    &-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 32rpx;
        font-weight: 500;
        color: $text-color;
      }
      
      &1 {
        margin-left: 20rpx;
        height: 36rpx;
        width: 36rpx;
      }
      
      &2 {
        margin-right: 24rpx;
        height: 40rpx;
        width: 40rpx;
      }
    }
    
    &-bottom {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 40rpx;
      width: 100%;
      gap: 126rpx;
      
      &-left {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
      }
      
      &-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
  
  .font3 {
    font-size: 32rpx;
    font-weight: 500;
    color: $text-color;
  }
  
  .font4 {
    font-size: 28rpx;
    font-weight: 400;
    color: $text-color;
  }
  
  .tips {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 56rpx;
    height: 80rpx;
    border-radius: 146rpx;
    background: $white;
    border: 2.8rpx solid $text-color;
    
    text {
      font-size: 32rpx;
      font-weight: 500;
      color: $text-color;
      margin-right: 56rpx;
    }
  }
  
  .mypet {
    margin-top: 42rpx;
    opacity: 1;
    border-radius: $border-radius-large;
    background: $white;
    border: 2.8rpx solid $text-color;
    padding: 18rpx 40rpx 32rpx;
    
    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 32rpx;
        font-weight: 700;
        color: $text-color;
      }
      
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
    
    &-content {
      margin-top: 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    &-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 296rpx;
      height: 154rpx;
      border-radius: 16rpx;
      background: $white;
      border: 2rpx solid $text-color;
      padding: 32rpx 20rpx;
      
      &-left {
        border-radius: 8rpx;
        border: 2rpx solid $text-color;
        width: 92rpx;
        height: 92rpx;
        overflow: hidden;
        
        image {
          width: 92rpx;
          height: 92rpx;
        }
      }
      
      &-right {
        margin-top: 12rpx;
        margin-left: 24rpx;
        
        text {
          font-size: 24rpx;
          font-weight: 400;
          color: $text-color;
        }
        
        &-top {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          
          image {
            margin-left: 20rpx;
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
    }
  }
  
  .add-my-pet {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 26rpx;
    height: 80rpx;
    width: 100%;
    border-radius: 16rpx;
    background: $white;
    border: 2rpx dashed $text-color;
    gap: 18rpx;
    
    image {
      width: 26rpx;
      height: 26rpx;
    }
  }
  
  .set {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 116rpx;
    width: 100%;
    border-radius: 26rpx;
    background: $white;
    border: 2.8rpx solid $border-color;
    margin-top: 26rpx;
    padding: 36rpx 46rpx;
    
    &-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      
      text {
        margin-left: 38rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: $text-color;
      }
      
      image {
        width: 52rpx;
        height: 52rpx;
      }
    }
    
    &-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}